<template>
  <div class="header">
   <div @click="headerClick" class="header-icon iconfont">&#xe86b;</div>
   <div class="logo"><img class="logo-img" src="http://m.shhuamei.cn/imgV3/logo.png" alt=""></div>
   <div class="talkBtn iconfont">&#xe873;</div>
   <div v-show="MenusShou" class="popMenus">
      <div class="pop_title clearfix">
        <span class="pop_title-xm">项目大全</span>
        <span class="iconfont icon-let" @click="headerHeidClick">&#xe84f;</span>
      </div>
<div class="menuContainer" id="menuContainer">
    <div class="menuNavs">
      <ul>
        <li class="" v-for="(item,index) of categoryList"  @click="getNum(index)"   :class="{on:index===curId}">{{item.title}}</li>
      </ul>
    </div>
    <div class="menuContents relative">
        <div class="menuContentBox ">
            <div class="menuContent " v-show="index===curId"
              v-for="(item, index) of categoryList">
                <div class="menuLists">
                  <div class="menuList" v-for="cont of item.children">
                    <h4>{{cont.title}}</h4>
                      <div class="links clearfix">
                      <a href="/zt/yangyayi/#dq" target="_blank" v-for="cont1 of cont.children">{{cont1.title}}</a>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  </div>

  </div>
  </div>
</template>

<script>
export default{
  name: 'HomeHeader',
  data()  {
      return  {
          MenusShou:false,
          curId: 0,
          "categoryList": [{
              "title": "眼部",
              "children": [{
              "title": "双眼皮",
              "children": [{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              }]
              },{
              "title": "眼部综合",
               "children": [{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              }]
              },{
              "title": "抗衰",
               "children": [{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              },{
              "title": "双眼皮"
              }]
              }]
              },
             {
             "title": "鼻部整形",
             "children": [{
             "title": "全鼻塑形",
             "children": [{
             "title": "海鸥线美鼻"
             },{
             "title": "海鸥线美鼻"
             },{
             "title": "海鸥线美鼻"
             },{
             "title": "海鸥线美鼻"
             }]
             },{
             "title": "鼻部调整",
              "children": [{
             "title": "埋线隆鼻"
             },{
             "title": "埋线隆鼻"
             },{
             "title": "埋线隆鼻"
             },{
             "title": "埋线隆鼻"
             }]
             },{
             "title": "鼻部矫正",
              "children": [{
             "title": "鼻部矫正"
             },{
             "title": "鼻部矫正"
             },{
             "title": "鼻部矫正"
             },{
             "title": "鼻部矫正"
                 }]
                 }]
                 },
             {
              "title": "面部轮廓",
              "children": [{
              "title": "核心竞争力",
              "children": [{
              "title": "颌面中心"
              },{
              "title": "颌面中心"
              },{
              "title": "颌面中心"
              },{
              "title": "颌面中心"
              }]
              },{
              "title": "特色技术",
               "children": [{
              "title": "长曲线下颌角"
              },{
              "title": "三维颧骨缩小"
              },{
              "title": "V-line网红脸"
              },{
              "title": "埋线隆鼻"
              }]
              },{
              "title": "脸型矫正",
               "children": [{
              "title": "四方脸"
              },{
              "title": "四方脸"
              },{
              "title": "四方脸"
              },{
              "title": "鼻部矫正"
                }]
                }]
                }]
      }
  },
  methods:  {
      headerClick() {
        this.MenusShou  = true
      },
      headerHeidClick() {
         this.MenusShou  = false
      },
      getNum(index) {
        //console.log(index)
       this.curId = index;
      }


  }

}
</script>

<style scoped>
  .header{
    display: flex;
    padding: .18rem;
    background: #903;
  }
  .header-icon{
    color:#fff;
    font-size:.18rem;
    flex: 0 0 .28rem;
  }
  .logo{
    font-size:.18rem;
    color:#fff;
    text-align: center;
    flex: auto;

    }
    .logo-img{
      width:2rem;
    }
  .talkBtn{
    color:#fff;
    font-size:.24rem;
    flex: 0 0 .28rem;
  }
  .popMenus{
    position: fixed;
    top:0;
    left:0px;
    width:100%;
    height: 100%;;
        background-color: #a09a9d;
    z-index: 99;
  }
.clearfix:after{display:table;content:"";clear:both;}
  .pop_title {
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #434343;
    padding: 0 3%;
    box-sizing: border-box;
    border-bottom: 1px solid #7b7779;
}.pop_title .pop_title-xm {
    display: inline-block;
    float: left;
    font-size:0.16rem;
    line-height: .48rem;
    font-weight: 400;
    color: #a09a9d;
}
.icon-let{float:right;font-size:0.16rem;
    line-height: .48rem;
    color: #a09a9d;}
    .menuContainer {
    width: 100%;
    height: 100%;
}
.menuNavs {
    width: 25.3%;
    background-color: #434343;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}
.menuNavs ul a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: .2rem;
}
.menuContents {
    width: 74.7%;
    height: 100%;
    overflow: hidden;
    float: left;
    padding: 0 3%;
    box-sizing: border-box;
}

.pop_title { width: 100%; position: relative; z-index: 2; background-color: #434343; padding: 0 3%;border-bottom:1px solid #7b7779; }

.closePopMenu { display: block; width: 5.2%;  right: 3%; top: 50%; }



.menuNavs ul li { width: 100%; font-size:.14rem; line-height: .4rem; padding-left: 9%; color:#fff;}
.menuNavs ul li.on { background-color:#a09a9d}
.menuNavs ul a { display: block; width: 100%; height: 100%; color: #fff;font-size: .15rem; }

.menuContent {width:100%;height:100%;overflow:hidden;}
.menuLists {padding-bottom:80px;}
.menuList h4 {    font-size: .14rem;
    color: #fff;
    line-height: .28rem;
    border-bottom: 1px solid #7b7779;
    margin-top: 2%;
    font-weight: normal;}
.menuList .links {padding:3% 0.5%;}
.menuList .links a{display: block;
    float: left;
    color: #434343;
    font-size: .13rem;
    line-height: .28rem;
    width: 33%;
    overflow: hidden;
}



</style>
